
<template>
  <div>
    <van-row type="flex" class="category">
      <van-row class="categoryHeader">
        <van-search class="search" disabled placeholder="请输入搜索关键词" />
      </van-row>
      <van-row class="categoryContent" justify="space-between">
        <van-row class="left">
          <van-sidebar v-model="active" class="bg">
            <van-sidebar-item v-for="category in categoryStore.category1" :key="category.id" :title="category.name" @click="changeId(category.id)" class="leftItem" />
          </van-sidebar>
        </van-row>
        <van-row class="right">
          <div class="isShow" v-show="active===0">
            <div class="swiper">
              <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-show="active===0">
                <van-swipe-item v-for="categoryImg in categoryStore.category3.bannerList" :key="categoryImg.id"><img :src="categoryImg.picUrl" alt="">
                </van-swipe-item>
              </van-swipe>
            </div>
            <div class="list">
              <van-grid :border="false" :column-num="3">
                <van-grid-item v-for="categoryItem in categoryStore.category2" :key="categoryItem.id" @click="goGoods(categoryItem.id)">
                  <van-image :src="categoryItem.bannerUrl" />
                  <van-grid-item :text="categoryItem.name" />
                </van-grid-item>
              </van-grid>
            </div>
          </div>
          <div class="isShow" v-show="active !== 0">
            <div class="bannerB" v-for="(goods, index) in categoryStore.currentCategory.bannerList" :key="index">
              <img :src="goods.picUrl" alt="" />
            </div>
            <div class="goodList">
              <div class="title" v-for="(good, index) in categoryStore.categoryGroupList" :key="index">
                <div class="titleName">{{ good.name }}</div>
                <van-grid :border="false" :column-num="3" :gutter="10" class="detImg">
                  <van-grid-item class='titleImg' @click="goGoods(del.id)" v-for="(del,index) in good.categoryList" :key="index">
                    <van-image :src="del.wapBannerUrl" />
                    <span>{{del.name}}</span>
                  </van-grid-item>
                </van-grid>
              </div>
            </div>
          </div>
        </van-row>
      </van-row>
    </van-row>
    <TabbarServe></TabbarServe>
  </div>
</template>


<script lang="ts" >
import { onMounted, reactive, ref } from 'vue';
import { getCategoryInfo, getGoodsList, getshopList } from '@/api/category';
import { Toast } from 'vant';
import { getDiffieHellman } from 'crypto';
import { useRouter } from 'vue-router';
import { useCategoryStore } from '@/store/category';
import HeaderSearch from '@/components/HeaderSearch/HeaderSearch.vue'
import { log } from 'console';
const categoryStore: any = useCategoryStore();
export default {
  name: 'Category',
  components: {
    HeaderSearch
  }
};
</script>
<script lang="ts" setup>

const active = ref(0);
const navId = ref(11);
const router = useRouter();

onMounted(() => {
  categoryStore.getCategory();
});
const changeId = (id: number) => {
  categoryStore.getrightList(id);
  navId.value = id;
};
const goGoods = (id2: number) => {
  router.push('/goods');
  // console.log(id1, navId.value);
  query:{
    id1: id2
    id2:navId.value
  }
  console.log(id2,navId)
  categoryStore.shopList(id2, navId.value);
};
</script>

<style lang="less" scoped>
.category {
  width: 100%;
  height: 100%;
  .categoryHeader {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    .search {
      width: 90%;
    }
  }
  .categoryContent {
    height: 100%;
    border-top: 1px solid #888;
    display: flex;
    justify-content: space-between;
    .left {
      width: 81px;
      .bg{
        --van-sidebar-background-color:#fff;
      }
    }
    .right {
      width: 90%;
      height: 100vh;
      flex: 1;
      // padding: 5px;
      border-left: 1px solid #888;
      text-align: center;
      .swiper {
        width: 280px;
        .my-swipe {
          text-align: center;
        }
      }
      .my-swipe .van-swipe-item {
        width: 100%;
        text-align: center;
        img {
          width: 273px;
          height: 96px;
        }
      }
      .list {
        img {
          width: 72px;
          height: 72px;
        }
      }
      .bannerB img {
        width: 100%;
        height: 105px;
      }
      .goodList {
        .title {
          width: 100%;
          font-size: 12px;
          margin: 20px 0;
          padding: 0 0 4px;
          .titleName {
            height: 26px;
            line-height: 26px;
            text-align: left;
            border-bottom: 1px solid #888;
            font-size: 14px;
            font-weight: 700;
            margin: 0 0 12px 12px;
          }
          .detImg {
            margin: 10px 0;
          }
        }
      }
    }
  }
}
</style>